import React from 'react';
import { useParams } from 'react-router-dom';
import { Card, Tag, Avatar, Button, Divider, Space } from 'antd';
import { LikeOutlined, StarOutlined, MessageOutlined, ShareAltOutlined, WarningOutlined } from '@ant-design/icons';
import { newsList } from '../../data/news';

const NewsDetail: React.FC = () => {
  const { id } = useParams();
  const news = newsList.find(n => String(n.id) === id);

  if (!news) {
    return <Card style={{ margin: 32 }}><h2>未找到该新闻</h2></Card>;
  }

  return (
    <div style={{ maxWidth: 900, margin: '32px auto', background: '#fff', borderRadius: 12, boxShadow: '0 2px 8px #f0f1f2' }}>
      <div style={{ padding: '32px 40px 24px 40px' }}>
        <h1 style={{ fontSize: 32, fontWeight: 700, marginBottom: 12 }}>{news.title}</h1>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16, gap: 16 }}>
          <Avatar style={{ background: '#1677ff' }}>{news.author[0]}</Avatar>
          <span style={{ color: '#222', fontWeight: 500 }}>{news.author}</span>
          <span style={{ color: '#888' }}>{news.time}</span>
          {news.tags.map(tag => <Tag key={tag} color="blue">{tag}</Tag>)}
        </div>
        <div style={{ color: '#666', fontSize: 16, marginBottom: 18 }}>{news.summary}</div>
        {news.image && <img src={news.image} alt={news.title} style={{ width: '100%', borderRadius: 8, marginBottom: 24 }} />}
        <div style={{ color: '#222', fontSize: 17, lineHeight: 2, whiteSpace: 'pre-line', marginBottom: 32 }}>{news.content}</div>

        {/* 文章结尾信息 */}
        <div style={{ fontSize: 14, color: '#888', borderBottom: '1px dashed #eee', paddingBottom: 16, marginBottom: 16 }}>
          本文由「{news.author}」原创出品，转载或内容合作请点击 <a href="#" style={{ color: '#1677ff' }}>转载说明</a>；违规转载必究。
        </div>

        {/* 寻求报道按钮 */}
        <Button type="primary" shape="round" style={{ marginBottom: 16 }}>
          寻求报道 {'>'}
        </Button>

        {/* 图片来源 */}
        {news.image && <div style={{ fontSize: 14, color: '#888', marginBottom: 24 }}>本文图片来自：企业授权</div>}

        {/* 点赞及互动区域 */}
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <Space size="large">
            <Space direction="vertical" align="center">
              <Button type="text" shape="circle" icon={<LikeOutlined style={{ fontSize: 24 }} />} style={{ height: 'auto' }} />
              <span style={{ fontSize: 14, color: '#666' }}>4</span>
            </Space>
            {/* 其他互动图标 */}
            <Button type="text" shape="circle" icon={<StarOutlined style={{ fontSize: 20, color: '#888' }} />} />
            <Button type="text" shape="circle" icon={<MessageOutlined style={{ fontSize: 20, color: '#888' }} />} />
            <Button type="text" shape="circle" icon={<ShareAltOutlined style={{ fontSize: 20, color: '#888' }} />} />
            <Button type="text" shape="circle" icon={<WarningOutlined style={{ fontSize: 20, color: '#888' }} />} />
          </Space>
        </div>

        {/* 分割线和评论区入口 */}
        <Divider />
        <h3 style={{ fontSize: 18, fontWeight: 600, color: '#222', marginTop: 24 }}>参与评论</h3>
      </div>
    </div>
  );
};

export default NewsDetail; 